<template>
<!--  组织机构管理页面-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <div class="select_with_input">
        <el-input v-model.trim="searchModel" clearable placeholder="请输入"></el-input>
      </div>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small">添加账号</el-button>
      <!-- table -->
      <el-table
        :data="tableList"
        row-key="id"
        lazy
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        :load="loadTree"
        border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="loginName" min-width="160" label="组织名称">
        <el-table-column prop="userName" min-width="160" label="负责人">
        <el-table-column prop="userPhone" min-width="160" label="联系电话">
        </el-table-column>
        <el-table-column prop="createTime" width="120" label="更新时间">
          <template slot-scope="scope">{{scope.row.createTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="270">
          <template slot-scope="scope">
            <button class="btn_edit" @click="handleEdit(scope.row)">编辑</button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogTitle"
      :visible.sync="isShowDialog"
      :before-close="clearValidate"
      width="600px">
      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :rules="rules" :model="currentRow" label-width="90px" class="form_width-200">
        <el-form-item label="性别">
          <el-radio-group v-model="currentRow.gender">
            <el-radio v-for="item in EnumGenderList" :key="item.code" :label="item.code">{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model.trim="currentRow.email" placeholder="输入邮箱"></el-input>
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="clearValidate">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  orgQuery,
  orgUpdate,
  orgAdd
} from '@/services/model/authority-mgmt'
import Format from '@/utils/format'
import { filterEmpty } from '@/services/request'
import Enums from '@/utils/enums'

export default {
  data () {
    return {
      form: {
        page: 1,
        pageSize: 10
      },
      rules: {
        userName: { required: true, message: '请输入姓名' },
      },
      tableList: [],
      isShowDialog: false, // 是否显示弹窗
      currentRow: {}, // 新增数据
      EnumGenderList: [],
    }
  },
  mixins:[Enums],
  computed: {
    // 弹窗的title
    dialogTitle () {
      return this.currentRow.id ? '编辑组织' : '新增组织'
    },
  },
  filters: {
    // 时间格式化
    formatTimer (timer) {
      return Format(new Date(timer), 'yyyy-MM-dd')
    },
    // 0正常，1锁定
    getStatusBtnMap (type) {
      return type ? '停用' : '启用'
    }
  },
  methods: {
    //懒加载树形结构
    async loadTree(tree, treeNode, resolve) {
      let params = {
        page: 1,
        pageSize: 999,
        parentId: tree.id
      }
      //最大组织
      if (treeNode.level === 0) {
        this.node_had = treeNode;
        this.resolve_had = resolve;
        this.tree_had = tree
      } else {
        //子组织
        let node = {
          node_had: treeNode,
          resolve_had: resolve,
          tree_had: tree
        }
        //不存在添加
        let exist = false
        this.nodeList.map(x => {
          if (x.tree_had.id === tree.id) {
            exist = true
          }
        })
        if (!exist) {
          this.nodeList.push(node)
        }
      }
      let res = await orgQuery(params)
      if (res.code === 200) {
        resolve(res.data?.records || [])
      }
    },
    // 获取当前的序号
    getIndex (index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange (val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
      // 分页大小改变
    handleSizeChange (val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange (val) {
      this.form.page = val
      this.queryList()
    },
    // 关闭弹窗之前清楚表单校验提示
    clearValidate () {
      this.$refs.form.clearValidate()
      this.isShowDialog = false
    },
    // 表单提交
    validateForm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.currentRow = filterEmpty(this.currentRow)
          this.submitData()
        }
      })
    },
    // 新增编辑提交数据
    async submitData () {
      // 根据ID判断使用新增还是编辑
      let action = this.currentRow.id ? orgUpdate : orgAdd
      let res = await action(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.currentRow.id ? '修改成功' : '添加成功'
        })
        this.isShowDialog = false
        this.queryList()
      }
      return res
    },
    // 新增数据
    handleAdd () {
      this.currentRow = {}
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    /**
     * row  当前操作行的对象
     */
    handleEdit (row) {
      this.currentRow = { ...row, password: '', repeat: '' }
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    async queryList () {
      let res = await orgQuery(this.form)
      if (res.code === 200) {
        this.tableList = res.data?.records || []
        this.form.size = Number(res.data?.size)
        this.form.total = Number(res.data?.total)
      }
    }
  },
  mounted () {
    // 性别枚举
    this.queryDictList(['EnumGender'], ['EnumGenderList'])
    this.queryList()
    // 获取当前用户的角色列表
  },
  activated () {

  }
}
</script>
<style lang="less" scoped>

</style>
